import { Button, Form, Input, Modal, Select, message } from 'antd';
import React, { useEffect, useState } from 'react';
import { updateAdminDictionary, getAdminDictionaryAll } from '@/services/adminDictionaryService'

interface Props {
  modalVisible: boolean;
  onSubmit: () => void;
  onCancel: () => void;
  dictionary: AdminDictionaryType.AdminDictionaryRequest
};

const { Option } = Select;

const UpdateModal: React.FC<Props> = (props) => {
  const { modalVisible, onSubmit, onCancel, dictionary } = props;
  const [parentId, setParentId] = useState<number>(dictionary.ParentId ?? 0);
  const [form] = Form.useForm();
  const [dictionaryList, setDictionaryList] = useState<AdminDictionaryType.AdminDictionaryResponse[]>([]);
  form.setFieldsValue(dictionary);
  const saveRole = () => {
    form.validateFields({ validateOnly: false })
      .then(() => {
        updateAdminDictionary({ ...dictionary, ...form.getFieldsValue(), ParentId: parentId ?? 0, Id: dictionary.Id }).then(result => {
          const { StatusCode } = result;
          if (StatusCode === 0) {
            message.success("保存成功！");
            onSubmit?.();
          }
        })
      }, () => {
      })
  }

  const loadDictionaryList = async () => {
    getAdminDictionaryAll({ "@fields": "Id,Value" }).then(result => {
      const { Items } = result;
      setDictionaryList(Items.filter(r => r.Id !== dictionary.Id));
    })
  }

  useEffect(() => {
    loadDictionaryList();
  }, [])

  return (
    <Modal
      width={700}
      destroyOnClose
      title="新建"
      open={modalVisible}
      onCancel={() => onCancel()}
      footer={[
        <Button key="submit" onClick={saveRole} type="primary">
          保存
        </Button>,
        <Button key="back" onClick={onCancel} >
          取消
        </Button>,
      ]}
    >
      <Form
        name="basic"
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 18 }}
        style={{ maxWidth: 600 }}
        form={form}
        initialValues={{ remember: true }}
        autoComplete="off"
      >
        <Form.Item<AdminDictionaryType.AdminDictionaryRequest>
          label="字典名称"
          name="Name"
          rules={[{ required: true, message: '请填入字典名称!' }]}
        >
          <Input name='name' type='text' />
        </Form.Item>
        <Form.Item<AdminDictionaryType.AdminDictionaryRequest>
          label="字典值"
          name="Value"
          rules={[{ required: true, message: '请填入字典值!' }]}
        >
          <Input name='value' type='text' />
        </Form.Item>
        <Form.Item<AdminDictionaryType.AdminDictionaryRequest>
          label="父级"
          name="ParentId"
        >
          <Select
            placeholder="请选择"
            allowClear
            onChange={(value: string) => { setParentId(parseInt(value)) }}
            options={dictionaryList.map(item => {
              return {
                value: item.Id,
                label: item.Value
              }
            })}
          />
        </Form.Item>
        <Form.Item<AdminDictionaryType.AdminDictionaryRequest>
          label="描述"
          name="Remark"
          rules={[{ required: true, message: '请填入描述!' }]}
        >
          <Input name='remark' type='text' />
        </Form.Item>
      </Form>
    </Modal>
  )
}

export default UpdateModal;
